<template>
	<div class="ac col min-h-screen-lg">
		<div class="h-5xl w-12/12 relative bg-gray-100">
			<img
				:src="userHomePageInfo.background"
				alt=""
				class="w-12/12 h-12/12 object-cover"
			/>
			<div class="text-center mt--3xl">
				<Avatar
					size="150"
					icon="ios-person"
					v-if="userHomePageInfo.avatar == ''"
				/>
				<Avatar
					:src="userHomePageInfo.avatar"
					size="150"
					v-if="userHomePageInfo.avatar !== ''"
				/>
				<h3 class="my-sm">{{ userHomePageInfo.nickname }}</h3>
				<h3>{{ userHomePageInfo.selfintro }}</h3>
			</div>
		</div>

		<div>
			<!-- <Button shape="circle" class="margin">编辑</Button> -->
			<!-- <Button shape="circle" class="margin" icon="ios-search"></Button>
      <Button shape="circle" class="margin" icon="ios-search"></Button> -->
		</div>
		<Tabs value="Created" class="w-10/12 mt-4xl mx-auto">
			<TabPane label="拥有" name="Created">
				<HotBids :nftList="this.assets" class="h-5xl" />
			</TabPane>
			<TabPane label="在售" name="On sale">
				<HotBids :nftList="this.onSaleAssets" />
			</TabPane>
			<!-- <TabPane label="Collectibles" name="Collectibles"></TabPane>
      <TabPane label="Liked" name="Liked"></TabPane>
      <TabPane label="Following" name="Following"></TabPane>
      <TabPane label="Followers" name="Followers"></TabPane> -->
		</Tabs>
	</div>
</template>

<script>
import HotBids from '../components/HotBids';
import Web3 from 'web3';
import { NETWORKID, CONTRACTBUILD } from '@/config';
import { getUserInfoByAddress } from '@/api';

export default {
	components: {
		HotBids,
	},
	data() {
		return {
			NETWORK_ID: NETWORKID,
			web3: Web3,
			// VRPressToken: '',
			userAddress: '',
			assets: [],
			onSaleAssets: [],
			userHomePageInfo: {},
			background: '',
		};
	},
	methods: {
		async getHomePageInfo() {
			let res = await getUserInfoByAddress({
				address: this.userAddress,
				lang: 'zh_CN',
			});
			if (res.status == 200) {
				if (res.data.code == 0) {
					this.userHomePageInfo = res.data.data;
					console.log(this.userHomePageInfo);
				}
			}
		},
		async getWeb3() {
			var web3;
			if (window.ethereum) {
				// Modern dapp browsers
				web3 = new Web3(window.ethereum);
				try {
					// metamaskが開いて権限許可を尋ねる
					await window.ethereum.enable();
				} catch (error) {
					// 拒否した場合に入ってくる
					console.log('denied');
				}
			} else if (window.web3) {
				// Legacy dapp browsers...
				web3 = new Web3(window.web3.currentProvider);
			} else {
				// this.selectedModal = this.MODALS.METAMASK
				// this.openModal({
				// 	title: "confirm",
				// 	isOnlyConfirm: true
				// })
			}

			web3 = new Web3(window.web3.currentProvider);
			return web3;
		},
		getDeployData() {
			return require(`../../../zos.dev-${this.NETWORK_ID}.json`);
		},
		filterByForSale(arrayList, value) {
			return arrayList.filter((item) => item.forSale == value);
		},
	},
	async mounted() {
		this.web3 = await this.getWeb3();
		await this.web3.eth.getAccounts((error) => {
			if (error) {
				console.log('error');
				return;
			}
			// this.myAddress = accounts[0];
			// console.log("my address is" + this.myAddress);
			this.userAddress = this.$route.query.userAddress;
		});

		console.log('user address is' + this.userAddress);
		// this.nickName = JSON.parse(localStorage.getItem("UserInfo")).nickname;
		await this.getHomePageInfo();

		const contractData = require('../../../' +
			CONTRACTBUILD +
			'/contracts/AssetToken.json');
		const deployData = this.getDeployData();
		// const tokenProxyAdresses = deployData.proxies["marketplace/AssetToken"]
		const VRPressTokenAddress = deployData.contracts.AssetToken.address;
		console.log(VRPressTokenAddress);

		const VRPressToken = await new this.web3.eth.Contract(
			contractData.abi,
			// tokenProxyAdresses[tokenProxyAdresses.length - 1].address
			VRPressTokenAddress
		);

		const myNfts = await VRPressToken.methods
			.tokensOfOwner(this.userAddress)
			.call();

		for (let i = 0; i < myNfts.length; i++) {
			const token = await VRPressToken.methods.getToken(myNfts[i]).call();
			const asset = {
				id: token['0'],
				name: token['1'],
				uri: token['3'],
				price: +this.web3.utils.fromWei(token[4].toString(), 'ether'),
				forSale: token['5'],
				owner: token['6'],
				avatar: this.userHomePageInfo.avatar,
			};
			this.assets.push(asset);
		}
		//nft列表
		// console.log(this.assets);
		this.onSaleAssets = this.filterByForSale(this.assets, 1);
	},
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
img[src=''],
img:not([src]) {
	opacity: 0;
}
</style>
